<!-- 我的日记 睡眠页面 -->

<template>
	<view class="container">
		<lk-topbar :title="'睡眠'" :backcolor="'#f5f5f5'" @back="back"></lk-topbar>
		<view class="p30">
			<view class="mb20" v-for="(item,index) in sleep" :key="index">
				<view class="recordItem">
					<view class="">{{item.moment == 0?'入睡':'醒来'}}时间</view>

					<picker mode="time" @change="change(index,$event)">
						<view>{{item.time?item.time:'请选时间'}} <text class="icon arrow"></text></view>
					</picker>

				</view>
				<view class="lists mt20">
					<view class="listBox flex flex-jcsa">
						<view :class="['listItem w30 tac', item.moment == 1 ?'actv':'']" @click="selectSleep(index,1)">
							醒来</view>
						<view :class="['listItem w30 tac', item.moment == 0?'actv':'']" @click="selectSleep(index,0)">入睡
						</view>
					</view>
				</view>


				<view class="">
					<view class="recordName">睡眠质量(多选)</view>
					<view class="lists mt20">
						<view class="listBox">
							<view :class="['listItem', item.discomfort.indexOf(it.content) != -1 ?'actv':'']"
								@click="select(index,it.content)" v-for="(it,ind) in discomforts" :key="it.id">
								{{it.content}}
							</view>
						</view>
						<view class="addOther" @click="show">添加其他</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn w75 h84 mauto radius50" @click="save()">打卡</view>
		<lk-addipt v-show="showAdd" @addSubmit='addSubmit' @close="close"></lk-addipt>
	</view>
</template>

<script>
	import lkAddipt from '../../components/lk-addipt/index.vue'
	export default {
		name: "",
		data() {
			return {
				showAdd: false,
				sleep: [{
					time: this.$utils.getTime(new Date(), 'h:m'),
					moment: 0,
					discomfort: []
				}], //我的睡眠
				discomforts: [{
					'id': 'SD001',
					'valid': 1,
					'content': '噩梦'
				}, {
					'id': 'SD002',
					'valid': 1,
					'content': '失眠'
				}, {
					'id': 'SD003',
					'valid': 1,
					'content': '梦话'
				}],
				posi: [],
				isSave: true,
				date: "",
				oldsleep: [],
				times:'',
				type:"",
				isClick:true,
			}
		},
		props: {

		},
		components: {
			lkAddipt
		},
		onLoad(o) {
			this.date = this.$utils.getTime(new Date(), 'Y-M-D');
			
			if (o.type == 'detail') {
				this.type = o.type;
				this.time = o.time;
				this.getUserDetail();
				this.getUserSleep()
			} else {
				this.getUserSleep();
				this.getUserDetail();
			}
		},
		onShow() {
			let pages = getCurrentPages();
			let cur = pages[pages.length - 1];
			if (typeof cur.data.med != 'undefined') {
				this.isSave = false;
				if (cur.data.cindex != -1) {
					this.sleep[cur.data.pindex].discomfort.splice(cur.data.cindex, 1, cur.data.med);
				} else {
					this.sleep[cur.data.pindex].discomfort.push(cur.data.med);
				}
			}
		},
		methods: {
			// 保存
			save() {
				let _this = this;
				if(_this.isClick){
					_this.isClick = false;
					if (!_this.sleep.every(item => item.discomfort.length > 0)) {
						uni.showToast({
							title: "选择睡眠质量",
							icon: "none"
						})
						_this.isClick = true;
						return false;
					}
					
					if(this.type != 'detail'){
						_this.oldsleep = _this.oldsleep.concat(_this.sleep)
					}
					
					_this.$utils.request({
						url: "/patient/diary/",
						method: "POST",
						data: {
							date: _this.date,
							sleep: _this.oldsleep,
						}
					}).then(res => {
						wx.showToast({
							title: "保存成功！"
						})
						this.isSave = true;
						setTimeout(() => {
							this.$routeJump.back()
							_this.isClick = true;
						}, 2000)
					})
				}
			},
			//请求睡眠
			async getUserDetail() {
				let _this = this;
				await _this.$utils.request({
					url: "/patient/diary/",
					data: {
						date: _this.date
					}
				}).then(res => {
					if (_this.type == 'detail') {
						res.data.sleep.forEach(item=>{
							if(item.time == _this.time){
								_this.sleep = [item];
							}
						})
					}
					_this.oldsleep = res.data.sleep;
				})
			},

			// // 获取睡眠质量列表
			async getUserSleep() {
				let _this = this;
				await _this.$utils.request({
					url: '/patient/sleep_discomforts/',
				}).then(res => {
					_this.discomforts = res.data
				})
			},

			/** 修改时间
			 * @param {Object} e 返回的参数
			 */
			change(i, e) {
				this.sleep[i].time = e.detail.value;
				this.isSave = false;
			},

			/** 显示添加弹窗
			 * @param {Object} name 添加哪项
			 */
			show() {
				this.showAdd = true;

			},
			close() {
				this.showAdd = false;
			},
			async addSubmit(name) {
				let _this = this;
				if (!name) {
					wx.showToast({
						title: "添加内容不能为空！",
						icon: 'none'
					})
					return false;
				}
				let discomforts = _this.discomforts;
				let num = Number(discomforts[discomforts.length - 1].id.slice(2)) + 1

				num = num < 10 ? 'SD00' + num : num < 100 ? "SD0" + num : "SD" + num

				discomforts.push({
					id: num,
					'valid': 1,
					'content': name
				})

				await _this.$utils.request({
					url: '/patient/sleep_discomforts/',
					method: "PUT",
					data: {
						discomforts:discomforts ,
					}
				}).then(res => {
					_this.getUserSleep()
				})
			},

			/** 时间选择
			 * @param {Object} index
			 * @param {Object} num
			 */
			selectSleep(index, num) {
				this.sleep[index].moment = num;
				this.isSave = false;
			},

			/** 
			 * 睡眠质量
			 * @param {Object} index
			 * @param {Object} name
			 */
			select(index, name) {

				if (this.sleep[index].discomfort.indexOf(name) == -1) {
					this.sleep[index].discomfort.push(name)
				} else {
					this.sleep[index].discomfort.splice(this.sleep[index].discomfort.indexOf(name), 1)
				}
				this.isSave = false;
			},

			/**
			 * 删除某条数据
			 * @param {Object} o 返回数据
			 */
			delectTap(o) {
				this.isSave = false;
				this.sleep.splice(o.ind, 1);
			},
			// 页面跳转
			path(url) {
				this.$routeJump.navigateTo(url)
				this.isSave = false;
			},
			// 页面返回
			back() {
				let _this = this;
				if (_this.isSave) {
					_this.$routeJump.back()
				} else {
					wx.showModal({
						title: "提示",
						content: "你还没保存，是否保存？",
						success(res) {
							if (res.confirm) {
								_this.save()
							} else {
								_this.$routeJump.back()
							}
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f5f5f5;

		.recordItem {
			padding: 20rpx 0;
			font-size: 36rpx;
			@include flex(space-between, center);

			.recordName {
				width: 470rpx
			}
		}

		.lists {
			width: 100%;
			height: auto;
			padding: 16rpx 0;
			background-color: #fff;
			border-radius: 16rpx;

			.listBox {

				.listItem {
					display: inline-block;
					padding: 10rpx 12rpx;
					margin: 10rpx 10rpx 0;
					background-color: #b5b5b5;
					border-radius: 10rpx;
					font-size: 32rpx;
					color: #fff;
				}
			}

			.actv {
				background-color: #79ad6f !important;
			}

			.addOther {
				display: inline-block;
				padding: 6rpx 12rpx;
				float: right;
				font-size: 32rpx;
				background-color: #79ad6f;
				border-radius: 10rpx;
				color: #fff;
				margin-right: 20rpx;
				margin-top: 40rpx;
			}

			&:after {
				clear: both;
				content: "";
				display: block;
			}
		}

		.btn {
			background-color: #79ad6f;
		}
	}
</style>
